<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2022-11-14 10:12:04
 * @LastEditTime: 2023-02-14 14:49:34
-->
<!-- 职级跳点报表 -->
<template>
  <div class='rank_jump_rpt'>
    <dt-search v-model="info" ref="search" @reset='onReset'>
      <Button type="primary" @click="exportData"
        v-if="unlocking('0110030100')">导出</Button>
      <Button type="primary"> <a
        href="https://images.tospurfang.com/doc/%E8%81%8C%E7%BA%A7%E8%B7%B3%E7%82%B9%E6%8A%A5%E8%A1%A8%E6%93%8D%E4%BD%9C%E6%8C%87%E5%BC%95.pdf"
        style="color:#fff;" target="_blank">查看操作指引</a>
      </Button>
    </dt-search>
    <dt-grid ref="table" :onFetch='onFetch' />
  </div>
</template>

<script setup>
  import ColumnsOpt from './opt/columns'
  import SearchOpt from './opt/search'
  import rankJumpApi from '@/biz/report/rankJumpReport'
  import moment from 'moment'
  import { reactive, ref ,onMounted} from 'vue';
  import { Message} from 'view-design'
  
  const info = reactive({
    month: moment().format('YYYY-MM'),
    rankPointsId: null,
  })

  const searchOpt = ref(null)

  const [table,search] = [ref(null) ,ref(null)]

  //导出
  function exportData() {
    rankJumpApi.bonusRankPointsExport(info.month, info.rankPointsId)
  }

  function onFetch(data) {
    return rankJumpApi.getList(info.month, info.rankPointsId)
  }

  function onReset() {
    searchOpt.value.getScreen(info)
  }

  onMounted(() => {
    searchOpt.value = new SearchOpt(() => {
      table.value.fetch()
    })
    table.value.init(this, new ColumnsOpt())
    search.value.init(table.value, searchOpt.value, info)
    searchOpt.value.getScreen(info)
  });

</script>
<style lang='scss' scoped>
  .rank_jump_rpt {
    padding: 20px;

    .detail_title {
      margin-bottom: 20px;

      .search_btn {
        margin-left: 20px;
      }
    }
  }
</style>